<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
        <div style="flex: 1"></div>
        <div style="width: 100px;">
            <el-dropdown>
                    <span class="el-dropdown-link">
                      {{ nickName }}
                      <el-icon class="el-icon--right">
                        <arrow-down/>
                      </el-icon>
                    </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="personalInfo">个人信息</el-dropdown-item>
                        <el-dropdown-item divided @click="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        <div style="margin: 10px 0">
            <el-dialog
                    v-model="dialogVisible"
                    title="个人信息"
                    width="30%"
            >
                <el-form :model="form" label-width="120px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.nickName" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="form.age" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="form.sex" label="男">男</el-radio>
                        <el-radio v-model="form.sex" label="女">女</el-radio>
                        <el-radio v-model="form.sex" label="未知">未知</el-radio>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input type="textarea" v-model="form.address" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button plain type="primary" @click="toUpdatePass">修改密码</el-button>
                    </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save()"
                    >保存</el-button
                    >
                  </span>
                </template>
            </el-dialog>

            <el-dialog
                    v-model="dialogVisible2"
                    title="修改密码"
                    width="30%"
            >
                <el-form :model="form2" label-width="120px">
                    <el-form-item label="当前密码">
                        <el-input v-model="form2.password" show-password style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input v-model="form2.passwordNew" show-password style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="form2.passwordConfirm" show-password style="width: 80%"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="updatePassword"
                    >修改</el-button
                    >
                  </span>
                </template>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    import cookie from "@/utils/cookie";
    import api from "@/api";
    import {ElMessage} from "_element-plus@2.2.18@element-plus";

    export default {
        name: "Header",
        methods: {
            toUpdatePass() {
                this.dialogVisible2 = true
            },
            logout() {
                cookie.clearCookie("user")
                this.$router.replace('/login')
            },
            personalInfo() {
                this.dialogVisible = true
                this.form2.id = this.form.id
            },
            save() {
                api.updateUser(this.form).then(res => {
                    this.handleResult_1(res, '保存成功', '保存失败')
                    this.loadUserInfo()
                }).catch(res => {
                    this.handleResult_2('更新失败')
                })
                this.dialogVisible = false
            },
            loadUserInfo() {
                // 重新向后台获取user对象
                api.findUserById(this.form.id).then(res => {
                    if (res.data.code == '0') {
                        this.form = res.data.data
                        this.nickName = res.data.data.nickName
                        // 更新user的cookie
                        cookie.clearCookie("user")
                        cookie.setCookie("user", JSON.stringify(res.data), 7)
                        if (res.data.data.role === 1) {
                            this.$router.replace('/supplierAllBack')
                        } else {
                            this.$router.replace('/supplierAllBack2')
                        }
                    }
                })
            },
            updatePassword() {
                api.findUserById(this.form.id).then(res => {
                    if (res.data.code == '0') {
                        if (res.data.data.password === this.form2.password) {  // 密码正确
                            if (this.form2.passwordNew === '') {
                                ElMessage.warning("请输入新密码")
                                return
                            } else if (this.form2.passwordNew !== this.form2.passwordConfirm) {
                                ElMessage.warning("两次密码输入不一致")
                                return
                            } else {
                                this.form.password = this.form2.passwordNew   // 将新密码放form里，拿去提交
                                api.updateUser(this.form).then(res => {
                                    this.handleResult_1(res, '修改成功', '修改失败')
                                    // 更新user的cookie
                                    cookie.clearCookie("user")
                                    cookie.setCookie("user", JSON.stringify(res.data), 7)
                                }).catch(res => {
                                    this.handleResult_2('修改失败')
                                })
                                this.dialogVisible2 = false
                            }
                        } else {
                            ElMessage.warning("密码不正确")
                        }
                    }
                })
            },

            // 提示操作成功或者失败
            handleResult_1(res, msg1, msg2) {
                if (res.data.code == "0") {
                    ElMessage({
                        message: msg1,
                        type: 'success'
                    })
                } else {
                    ElMessage.error(msg2)
                }
            },
            handleResult_2(msg) {   // 操作异常时提示
                ElMessage.error(msg)
            },
        },
        data() {
            return {
                nickName: '',
                form: {},
                form2: {},
                dialogVisible: false,
                dialogVisible2: false,
                password: 0,
            }
        },
        created() {
            // 取出cookie里面的用户信息，判断用户是否登录
            let userJson = cookie.getCookie("user")
            let user = JSON.parse(userJson)
            if (!user) {
                this.$router.push("/login")   // 未登录则跳转到登录界面
            } else {
                this.nickName = user.data.nickName
                this.form = user.data
            }
        },
    }
</script>

<style scoped>
    .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
        margin-top: 18px;
    }
</style>